<template>
  <div class="ts-feedback">
    <ts-header title="意见反馈" back></ts-header>
    <section class="ts-feedback-opinion">
      <span class="ts-feedback-op-title">问题和意见</span>
      <textarea v-model="content" class="ts-feedback-opinion-edit" rows="6"
                placeholder="请填写10字以上的问题描述以便我们更好的了解"></textarea>
    </section>
    <ts-group>
      <ts-filed label="联系电话" type="tel" v-model="member_tel" labelWidth="2.00rem"></ts-filed>
    </ts-group>
    <div class="ts-feedback-submit">
      <ts-button :disabled="!isChecked" @click="addFeedback" type="primary" size="large">提交</ts-button>
    </div>
  </div>
</template>

<script>
  import {ADD_FEEDBACK} from '../../assets/js/api'
  import verify from '../../utils/verify'

  export default {
    name: 'feedback',
    data() {
      return {
        content: '',
        member_tel: ''
      }
    },
    methods: {
      async addFeedback() {
        if (verify.mobile(this.member_tel)) {
          const json = await this.$http.post(ADD_FEEDBACK, this.$data);
          if (json.result === 1) {
            this.$modal.alert({message: '提交成功，感谢您的意见'}).then(action => {
              this.$router.goBack();
            });
          }
        } else {
          this.$toast('手机号格式不正确');
        }
      }
    },
    computed: {
      isChecked() {
        return verify.requiredObjProp(this.$data).isValid;
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";
  @import "../../assets/css/variables";

  @mixin placeholderStyle() {
    position: relative;
    top: -3px;
    @include sc(.30rem, #909090);
  }

  textarea:-ms-input-placeholder {
    @include placeholderStyle;
  }

  textarea::-webkit-input-placeholder {
    @include placeholderStyle;
  }

  .ts-feedback {
    .ts-feedback-opinion {
      margin-bottom: .20rem;
      background-color: #ffffff;
      padding: .25rem .24rem .35rem;
      position: relative;
      @include borderScale('bottom');
      .ts-feedback-op-title {
        display: block;
        font-size: .30rem;
      }
      .ts-feedback-opinion-edit {
        font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
        margin-top: .20rem;
        background-color: #F7F7F7;
        width: 100%;
        border: none;
        padding: .22rem;
        resize: none;
      }
    }
    .ts-feedback-submit {
      margin-top: 1.20rem;
      padding: 0 .36rem;
    }
  }
</style>
